<template>
	<view id="box">
		<view class="goods--box">
			<view class="goods--item" v-for="(item, index) in data" :key="index" @click="todetail(item)">
				<view class="item--cover" :style="{backgroundImage: 'url(' + item.mainImage + ')'}">
					<view class="item--content">
						<view class="title">{{item.hotelName}}</view>
						<view class="pingfen">
							<view class="pingfen-num">{{item.avgScore >='5'?'5.0':item.avgScore }}</view>
							<view>{{start[item.hotelStar]}}</view>
							
						</view>
						<view class="item-bottom">
							<view class="comment-num"><text>{{item.content_num}}条评论</text></view>
							<view class="price">
								<text class="price1">￥</text>
								<text class="price2">{{item.startingPrice}}</text>
								<text class="price3">元</text>
								<text class="price4">起</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "hotelList",
		props:{
			city:{
				type:String,
				default:'北京'
			}
		},
		data() {
			return {
				page: 1,
				data: [],
				starTime:"2023-12-12",
				endTime:"2023-12-13",
				start: [
					"",
					"一星级",
					"二星级",
					"三星级",
					"四星级",
					"五星级",
					"经济型",
					"舒适型",
					"高档型",
					"豪华型",
				]
			}
		},
		mounted() {
			this.loadData()
		},
		methods: {
			todetail(item){
				uni.navigateTo({
					url:'/otherpages/hotel/hotelDetail?id='+item.hotelID
				})
			},
			loadData() {
				this.request.httpTokenRequest({
					url: "hotel/index",
					method: 'post'
				}, {
					cityName:"北京",
					checkInDate:this.$util.getDate(0),
					checkOutDate:this.$util.getDate(1),
					pageIndex:this.page,
					pageSize:10
				}).then(res => {
					// if (res.data.data.length < res.data.data.per_page)
					// 	this.hasMore = false;
					// 把后端数据赋给页面	
					this.data = [...this.data, ...res.data.data.hotelList];

					this.data_number = this.data.length
					this.$nextTick(()=>{
						const query = uni.createSelectorQuery().in(this);
						query.select('#box').boundingClientRect(data => {
							this.$emit('setData',{
								height:data.height,
								key:'height3'
							})
						}).exec();
					})
					
					// // 隐藏加载条 重置下拉 上拉状态
					// uni.hideLoading()
					// if (type) callback(false)
				}, error => {

				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	$padding: 30rpx;
	$margin: 10rpx;
	$radius: 20rpx;

	.ellipsis-1 {
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ellipsis-2 {
		max-width: 100%;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.goods--box {
		display: flex;
		flex-wrap: wrap;
		padding: $padding/3;

		.goods--item {
			background: white;
			width: calc(50% - #{$margin*2});
			background: white;
			border-radius: $radius;
			overflow: hidden;
			margin: $margin;

			.item--cover {
				width: 100%;
				padding-top: 100%;
				background-position: center;
				background-size: cover;
			}

			.item--content {
				width: 100%;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				background-color: #FFFFFF;
				&>.title {
					display: block;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #363737;
					line-height: 40rpx;
					height: 100rpx;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;

				}

				&>.pingfen {
					width: 127rpx;
					background: url('../../static/index/jiudian-bg.png')no-repeat;
					background-size: 100% 100%;
					font-size: 22rpx;
					color: #FFFFFF;
					display: flex;
					font-family: simhei;
					align-items: baseline;
					padding: 0 8rpx;
					height: 30rpx;
					.pingfen-num{
						margin-right: 18rpx;
					}
				}

				&>.item-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.comment-num {

						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #656667;

						text {
							font-size: 22rpx;
							// #ifdef H5
							transform: scale(0.8);
							// transform-origin:0 0; 
							//#endif
						}

					}

					.price {
						display: flex;
						align-items: baseline;

						.price1 {
							font-size: 20rpx;
							// #ifdef H5
							transform: scale(0.8);
							transform-origin: 0 0;
							//#endif
							color: #EC2700;
						}

						.price2 {
							font-size: 30rpx;
							color: #EC2700;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							color: #EC2700;
						}

						.price3 {
							font-size: 20rpx;
							// #ifdef H5
							transform: scale(0.8);
							transform-origin: 0 0;
							//#endif
							color: #EC2700;
						}

						.price4 {
							font-size: 20rpx;
							// #ifdef H5
							transform: scale(0.8);
							transform-origin: 0 0;
							//#endif
							color: #656667;
						}
					}
				}
			}
		}
	}
</style>